CSS ಬಳಸಿ ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ನ ಬಣ್ಣ ಮತ್ತು ನೋಟವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ, ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಸ್ಥಿರತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
CSS ಕಸ್ಟಮ್ ಹೈಲೈಟ್: ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಸ್ಟೈಲಿಂಗ್‌ನಲ್ಲಿ ಪರಿಣತಿ
ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್, ಅಂದರೆ ವೆಬ್‌ಪುಟದಲ್ಲಿ ಕರ್ಸರ್ ಅನ್ನು ಪದಗಳ ಮೇಲೆ ಎಳೆಯುವ ಸರಳ ಕ್ರಿಯೆ, ವಿನ್ಯಾಸ ಮತ್ತು ಬ್ರ್ಯಾಂಡಿಂಗ್ ವಿಷಯದಲ್ಲಿ ಹೆಚ್ಚಾಗಿ ಕಡೆಗಣಿಸಲ್ಪಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಹೈಲೈಟ್ ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ಬಲಪಡಿಸುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು CSS ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ಬಗ್ಗೆ ನಿಮಗೆ ತಿಳಿಯಬೇಕಾದ ಎಲ್ಲವನ್ನೂ ವಿವರಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ::selection ಸೂಡೋ-ಎಲಿಮೆಂಟ್, ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು, ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ವಿನ್ಯಾಸವನ್ನು ಉನ್ನತೀಕರಿಸಲು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಸೇರಿವೆ.
ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಏಕೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಬೇಕು?
ಡಿಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಹೈಲೈಟ್ ಬಣ್ಣ (ಸಾಮಾನ್ಯವಾಗಿ ನೀಲಿ) ಕ್ರಿಯಾತ್ಮಕವಾಗಿದ್ದರೂ, ಅದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಬಣ್ಣದ ಯೋಜನೆ ಅಥವಾ ಬ್ರ್ಯಾಂಡ್ ಸೌಂದರ್ಯಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗದಿರಬಹುದು. ಹೈಲೈಟ್ ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದರಿಂದ ಹಲವಾರು ಪ್ರಯೋಜನಗಳಿವೆ:
- ಬ್ರ್ಯಾಂಡ್ ಸ್ಥಿರತೆ: ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್ ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳಿಗೆ ಪೂರಕವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಇದು ಒಂದು ಸುಸಂಘಟಿತ ದೃಶ್ಯ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
- ಸುಧಾರಿತ ಬಳಕೆದಾರ ಅನುಭವ: ಚೆನ್ನಾಗಿ ಆಯ್ಕೆಮಾಡಿದ ಹೈಲೈಟ್ ಬಣ್ಣವು ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಕಣ್ಣಿನ ಒತ್ತಡವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ದೃಷ್ಟಿ ದೋಷವಿರುವ ಬಳಕೆದಾರರಿಗೆ.
- ವರ್ಧಿತ ದೃಶ್ಯ ಆಕರ್ಷಣೆ: ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ವಿನ್ಯಾಸಕ್ಕೆ ಸೂಕ್ಷ್ಮವಾದ ಪರಿಷ್ಕರಣೆ ಮತ್ತು ವೃತ್ತಿಪರತೆಯ ಸ್ಪರ್ಶವನ್ನು ನೀಡುತ್ತದೆ.
- ಹೆಚ್ಚಿದ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ: ಚಿಕ್ಕದೆಂದು ತೋರಿದರೂ, ದೃಶ್ಯ ವಿವರಗಳು ಒಟ್ಟಾರೆ ಬಳಕೆದಾರರ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ಮತ್ತು ತೃಪ್ತಿಗೆ ಕೊಡುಗೆ ನೀಡುತ್ತವೆ.
::selection ಸೂಡೋ-ಎಲಿಮೆಂಟ್
CSS ನೊಂದಿಗೆ ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ::selection ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಪ್ರಮುಖವಾಗಿದೆ. ಇದು ಆಯ್ಕೆಮಾಡಿದ ಪಠ್ಯದ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮತ್ತು ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಬಳಸಿ ನೀವು ಫಾಂಟ್-ಗಾತ್ರ, ಫಾಂಟ್-ತೂಕ, ಅಥವಾ ಟೆಕ್ಸ್ಟ್-ಡೆಕೋರೇಷನ್‌ನಂತಹ ಇತರ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್
ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳವಾಗಿದೆ:
::selection {
background-color: color;
color: color;
}
color ಅನ್ನು ನಿಮ್ಮ ಅಪೇಕ್ಷಿತ ಬಣ್ಣದ ಮೌಲ್ಯಗಳೊಂದಿಗೆ (ಉದಾ., ಹೆಕ್ಸಾಡೆಸಿಮಲ್, RGB, HSL, ಅಥವಾ ಹೆಸರಿಸಲಾದ ಬಣ್ಣಗಳು) ಬದಲಾಯಿಸಿ.
ಉದಾಹರಣೆ
ಇಲ್ಲಿ ಒಂದು ಸರಳ ಉದಾಹರಣೆಯಿದೆ, ಇದು ಪಠ್ಯವನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ತಿಳಿ ನೀಲಿ ಮತ್ತು ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಬಿಳಿ ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ:
::selection {
background-color: #ADD8E6; /* ತಿಳಿ ನೀಲಿ */
color: white;
}
ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ಅನ್ವಯಿಸಲು ಈ CSS ನಿಯಮವನ್ನು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅಥವಾ <style> ಟ್ಯಾಗ್‌ಗೆ ಸೇರಿಸಿ.
ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ: ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು ಪರಿಹರಿಸುವುದು
ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಂದ ::selection ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದ್ದರೂ, ಹಳೆಯ ಆವೃತ್ತಿಗಳಿಗೆ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳು ಬೇಕಾಗಬಹುದು. ಗರಿಷ್ಠ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, -moz-selection ಮತ್ತು -webkit-selection ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು ಸೇರಿಸುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ.
ಪ್ರಿಫಿಕ್ಸ್‌ಗಳೊಂದಿಗೆ ನವೀಕರಿಸಿದ ಸಿಂಟ್ಯಾಕ್ಸ್
ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು ಸೇರಿಸಲು ನವೀಕರಿಸಿದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಇಲ್ಲಿದೆ:
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
ಇದು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ಹಳೆಯ ಫೈರ್‌ಫಾಕ್ಸ್ (-moz-selection) ಮತ್ತು ಸಫಾರಿ/ಕ್ರೋಮ್ (-webkit-selection) ಸೇರಿದಂತೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು
ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವಾಗ, ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡುವುದು ಬಹಳ ಮುಖ್ಯ. ಕಳಪೆ ಬಣ್ಣದ ಆಯ್ಕೆಗಳು ದೃಷ್ಟಿ ದೋಷವಿರುವ ಬಳಕೆದಾರರಿಗೆ ಆಯ್ಕೆಮಾಡಿದ ಪಠ್ಯವನ್ನು ಓದಲು ಕಷ್ಟಕರವಾಗಿಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳಿವೆ:
- ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ: ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮತ್ತು ಪಠ್ಯದ ಬಣ್ಣದ ನಡುವೆ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಇದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. WCAG (ವೆಬ್ ಕಂಟೆಂಟ್ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಗೈಡ್‌ಲೈನ್ಸ್) ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕಾಗಿ ಕನಿಷ್ಠ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕಾಗಿ 3:1 ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.
- ಬಣ್ಣ ಕುರುಡುತನ: ಹೈಲೈಟ್ ಬಣ್ಣಗಳನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ ಬಣ್ಣ ಕುರುಡುತನದ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ವಿವಿಧ ರೀತಿಯ ಬಣ್ಣ ದೃಷ್ಟಿ ಕೊರತೆಯಿರುವ ಜನರಿಗೆ ಪ್ರತ್ಯೇಕಿಸಲು ಕಷ್ಟಕರವಾದ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ತಪ್ಪಿಸಿ. WebAIM ನ ಕಲರ್ ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್ (https://webaim.org/resources/contrastchecker/) ನಂತಹ ಪರಿಕರಗಳು ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ.
- ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳು: ಬಳಕೆದಾರರು ತಮ್ಮ ವೈಯಕ್ತಿಕ ಅಗತ್ಯಗಳು ಮತ್ತು ಆದ್ಯತೆಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ಹೈಲೈಟ್ ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅವಕಾಶ ನೀಡುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಇದನ್ನು ಬಳಕೆದಾರರ ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಅಥವಾ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಗಳ ಮೂಲಕ ಸಾಧಿಸಬಹುದು.
ಉದಾಹರಣೆ: ಪ್ರವೇಶಸಾಧ್ಯ ಬಣ್ಣ ಸಂಯೋಜನೆ
ಹೆಚ್ಚಿನ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಹೊಂದಿರುವ ಪ್ರವೇಶಸಾಧ್ಯ ಬಣ್ಣ ಸಂಯೋಜನೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
::selection {
background-color: #2E8B57; /* ಸಮುದ್ರ ಹಸಿರು */
color: #FFFFFF; /* ಬಿಳಿ */
}
ಈ ಸಂಯೋಜನೆಯು ಬಲವಾದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರಿಗೆ ಆಯ್ಕೆಮಾಡಿದ ಪಠ್ಯವನ್ನು ಓದಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
ಸುಧಾರಿತ ಕಸ್ಟಮೈಸೇಶನ್ ತಂತ್ರಗಳು
ಮೂಲಭೂತ ಬಣ್ಣ ಬದಲಾವಣೆಗಳನ್ನು ಮೀರಿ, ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಡೈನಾಮಿಕ್ ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು CSS ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಇತರ ತಂತ್ರಗಳನ್ನು ಬಳಸಬಹುದು.
CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು
CSS ವೇರಿಯೇಬಲ್‌ಗಳು (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್ ಎಂದೂ ಕರೆಯಲ್ಪಡುತ್ತವೆ) ಸುಲಭವಾಗಿ ನವೀಕರಿಸಬಹುದಾದ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಾದ್ಯಂತ ವಿನ್ಯಾಸದಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
ನಿಮ್ಮ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು :root ಸೂಡೋ-ಕ್ಲಾಸ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಿ:
:root {
--highlight-background: #FFD700; /* ಚಿನ್ನ */
--highlight-text: #000000; /* ಕಪ್ಪು */
}
::selection ನಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು
ನಿಮ್ಮ ::selection ನಿಯಮದಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು var() ಫಂಕ್ಷನ್ ಬಳಸಿ:
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
ಈಗ, :root ಸೂಡೋ-ಕ್ಲಾಸ್‌ನಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನವೀಕರಿಸುವ ಮೂಲಕ ನೀವು ಹೈಲೈಟ್ ಬಣ್ಣವನ್ನು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಬಹುದು.
ಸಂದರ್ಭವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಹೈಲೈಟ್ ಬಣ್ಣಗಳು
ಆಯ್ಕೆಮಾಡಿದ ಪಠ್ಯದ ಸಂದರ್ಭವನ್ನು ಆಧರಿಸಿ ನೀವು ಡೈನಾಮಿಕ್ ಹೈಲೈಟ್ ಬಣ್ಣಗಳನ್ನು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಹೆಡ್ಡಿಂಗ್‌ಗಳಿಗಾಗಿ ದೇಹದ ಪಠ್ಯಕ್ಕಿಂತ ವಿಭಿನ್ನ ಹೈಲೈಟ್ ಬಣ್ಣವನ್ನು ಬಳಸಲು ಬಯಸಬಹುದು. ಇದನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸಿ ಸಾಧಿಸಬಹುದು.
ಉದಾಹರಣೆ: ವಿಭಿನ್ನ ಹೈಲೈಟ್‌ಗಳು
ಮೊದಲಿಗೆ, ವಿಭಿನ್ನ ಹೈಲೈಟ್ ಬಣ್ಣಗಳಿಗಾಗಿ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:
:root {
--heading-highlight-background: #87CEEB; /* ಆಕಾಶ ನೀಲಿ */
--heading-highlight-text: #FFFFFF; /* ಬಿಳಿ */
--body-highlight-background: #FFFFE0; /* ತಿಳಿ ಹಳದಿ */
--body-highlight-text: #000000; /* ಕಪ್ಪು */
}
ನಂತರ, ಆಯ್ಕೆಮಾಡಿದ ಪಠ್ಯದ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ಗೆ ಕ್ಲಾಸ್ ಸೇರಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ:
// ಇದು ಒಂದು ಸರಳೀಕೃತ ಉದಾಹರಣೆ ಮತ್ತು ವಿಭಿನ್ನ ಸೆಲೆಕ್ಷನ್ ಸನ್ನಿವೇಶಗಳನ್ನು
// ನಿಖರವಾಗಿ ನಿಭಾಯಿಸಲು ಹೆಚ್ಚು ದೃಢವಾದ ಅನುಷ್ಠಾನದ ಅಗತ್ಯವಿದೆ.
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
ಅಂತಿಮವಾಗಿ, ವಿಭಿನ್ನ ಕ್ಲಾಸ್‌ಗಳಿಗಾಗಿ CSS ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
ಈ ಉದಾಹರಣೆಯು ಆಯ್ಕೆಮಾಡಿದ ಸಂದರ್ಭವನ್ನು ಆಧರಿಸಿ ಹೆಡ್ಡಿಂಗ್‌ಗಳು ಮತ್ತು ದೇಹದ ಪಠ್ಯಕ್ಕಾಗಿ ನೀವು ಹೇಗೆ ವಿಭಿನ್ನ ಹೈಲೈಟ್ ಬಣ್ಣಗಳನ್ನು ರಚಿಸಬಹುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ. ಹೆಚ್ಚು ಸಮಗ್ರ ಅನುಷ್ಠಾನಕ್ಕೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ವಿವಿಧ ಸೆಲೆಕ್ಷನ್ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಬೇಕಾಗುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು
ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಹೈಲೈಟ್ ವಿನ್ಯಾಸಗಳಿಗೆ ಸ್ಫೂರ್ತಿ ನೀಡಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಇಲ್ಲಿವೆ:
- ಕನಿಷ್ಠತಮ ವಿನ್ಯಾಸ: ಸ್ವಚ್ಛ ಮತ್ತು ಆಧುನಿಕ ನೋಟವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಹೈಲೈಟ್‌ಗಾಗಿ ಸೂಕ್ಷ್ಮ, ಕಡಿಮೆ ಸ್ಯಾಚುರೇಟೆಡ್ ಬಣ್ಣವನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ತಿಳಿ ಬೂದು ಅಥವಾ ಬೀಜ್.
- ಡಾರ್ಕ್ ಥೀಮ್: ಡಾರ್ಕ್ ಥೀಮ್‌ಗಾಗಿ ಡಿಫಾಲ್ಟ್ ಬಣ್ಣಗಳನ್ನು ತಿರುಗಿಸಿ, ಹೈಲೈಟ್‌ಗಾಗಿ ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆ ಮತ್ತು ತಿಳಿ ಪಠ್ಯವನ್ನು ಬಳಸಿ. ಇದು ಕಡಿಮೆ-ಬೆಳಕಿನ ಪರಿಸರದಲ್ಲಿ ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- ಬ್ರ್ಯಾಂಡಿಂಗ್ ಬಲವರ್ಧನೆ: ಬ್ರ್ಯಾಂಡ್ ಗುರುತಿಸುವಿಕೆಯನ್ನು ಬಲಪಡಿಸಲು ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್‌ನ ಪ್ರಾಥಮಿಕ ಅಥವಾ ದ್ವಿತೀಯಕ ಬಣ್ಣವನ್ನು ಹೈಲೈಟ್‌ಗಾಗಿ ಬಳಸಿ.
- ಸಂವಾದಾತ್ಮಕ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು: ಸಂವಾದಾತ್ಮಕ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರಿಗೆ ಹಂತಗಳ ಮೂಲಕ ಮಾರ್ಗದರ್ಶನ ನೀಡಲು ಹೈಲೈಟ್‌ಗಾಗಿ ಪ್ರಕಾಶಮಾನವಾದ, ಗಮನ ಸೆಳೆಯುವ ಬಣ್ಣವನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ರೋಮಾಂಚಕ ಹಳದಿ ಅಥವಾ ಕಿತ್ತಳೆ.
- ಕೋಡ್ ಹೈಲೈಟಿಂಗ್: ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸಲು ಮತ್ತು ಕೋಡ್‌ನ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಕೋಡ್ ಸ್ನಿಪ್ಪೆಟ್‌ಗಳಿಗಾಗಿ ಹೈಲೈಟ್ ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.
ಉದಾಹರಣೆ: ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ನೊಂದಿಗೆ ಕೋಡ್ ಹೈಲೈಟಿಂಗ್
ಕೋಡ್ ಹೈಲೈಟಿಂಗ್‌ಗಾಗಿ, ಸೂಕ್ಷ್ಮವಾದ ಆದರೆ ವಿಭಿನ್ನವಾದ ಬಣ್ಣವು ಓದುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ:
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* ಪಾರದರ್ಶಕತೆಯೊಂದಿಗೆ ತಿಳಿ ಹಳದಿ */
color: #000000; /* ಕಪ್ಪು */
}
ಈ ಉದಾಹರಣೆಯು ಆಯ್ಕೆಮಾಡಿದ ಕೋಡ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಅರೆ-ಪಾರದರ್ಶಕ ತಿಳಿ ಹಳದಿ ಬಣ್ಣವನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಅತಿಯಾಗಿ ಗಮನವನ್ನು ಸೆಳೆಯದಂತೆ ಪ್ರತ್ಯೇಕಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
ತಪ್ಪಿಸಬೇಕಾದ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು
ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವಾಗ ತಪ್ಪಿಸಬೇಕಾದ ಕೆಲವು ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಇಲ್ಲಿವೆ:
- ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ಹಿನ್ನೆಲೆ ಮತ್ತು ಪಠ್ಯದ ಬಣ್ಣಗಳ ನಡುವೆ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಫಲವಾಗುವುದು.
- ಅತಿಯಾದ ಪ್ರಕಾಶಮಾನವಾದ ಅಥವಾ ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯುವ ಬಣ್ಣಗಳು: ಕಣ್ಣಿನ ಒತ್ತಡವನ್ನು ಉಂಟುಮಾಡುವ ಮತ್ತು ಓದುವಿಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವ ತುಂಬಾ ಪ್ರಕಾಶಮಾನವಾದ ಅಥವಾ ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯುವ ಬಣ್ಣಗಳನ್ನು ಬಳಸುವುದು.
- ಅಸಂಗತ ಸ್ಟೈಲಿಂಗ್: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ವಿಭಿನ್ನ ಹೈಲೈಟ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದು, ಇದು ಅಸಮಂಜಸ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
- ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು ಮರೆಯುವುದು: ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳನ್ನು ಸೇರಿಸಲು ನಿರ್ಲಕ್ಷಿಸುವುದು.
- ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದು: ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವಲ್ಲಿ ಮಾತ್ರ ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಅವುಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದರಿಂದ ಸೈಟ್ ಅಸ್ತವ್ಯಸ್ತವಾಗಿ ಅಥವಾ ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯುವಂತೆ ಕಾಣಿಸಬಹುದು.
ತೀರ್ಮಾನ
CSS ನೊಂದಿಗೆ ಟೆಕ್ಸ್ಟ್ ಸೆಲೆಕ್ಷನ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ಬಲಪಡಿಸಲು ಒಂದು ಸರಳವಾದ ಆದರೆ ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವಾಗಿದೆ. ::selection ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಹರಿಸುವ ಮೂಲಕ, ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡುವ ಮೂಲಕ, ನೀವು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್‌ಗೆ ಪರಿಪೂರ್ಣ ಹೈಲೈಟ್ ಶೈಲಿಯನ್ನು ಕಂಡುಹಿಡಿಯಲು ವಿಭಿನ್ನ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು ಮತ್ತು ತಂತ್ರಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ.
ಸ್ಥಿರ ಫಲಿತಾಂಶಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಹೈಲೈಟ್‌ಗಳನ್ನು ಯಾವಾಗಲೂ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ. ಈ ಹೆಚ್ಚಾಗಿ ಕಡೆಗಣಿಸಲ್ಪಟ್ಟ ವಿವರಕ್ಕೆ ಗಮನ ಕೊಡುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ವಿನ್ಯಾಸವನ್ನು ಉನ್ನತೀಕರಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ತೊಡಗಿಸಿಕೊಳ್ಳುವ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು.